import React, { PureComponent } from "react";

function LifeCycle(Cmp) {
  // 注意在class和函数中的使用方式是存在一些差异的，用起来就是不一样吧！！
  return class extends PureComponent {
    UNSAFE_componentWillMount() {
      this.beginTime = Date.now();
    }
    componentDidMount() {
      this.endTime = Date.now();
      const interval = this.endTime - this.beginTime;
      console.log(`${Cmp.name}组件渲染时间(毫秒)是：`, interval);
    }
    render() {
      return <Cmp {...this.props}></Cmp>;
    }
  };
}

class Home extends PureComponent {
  render() {
    return (
      <div>
        <span>Home</span>
      </div>
    );
  }
}

// 里面也是可以调用声明周期这样的
Home = LifeCycle(Home);

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <h2>声明周期的高阶函数应用</h2>
        <Home></Home>
      </div>
    );
  }
}
